<template>
  <div class="reciving">
    <van-popup
      v-model="reciving"
      position="right"
      overlay
      :style="{ width:'95%', height: '100%' }"
    >
      <van-nav-bar
        title="选择收货地址"
        left-text="返回"
        right-text="新增地址"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />

      <div class="search">
        <!-- <span>长沙</span> -->
        <div
          slot="action"
          @click="goCity"
        >
          <span>{{$store.state.city}}</span>
        </div>
        <!-- <div class="search2"> -->
        <van-search
          placeholder="请输入地址"
          v-model="value"
        >
        </van-search>
        <!-- </div> -->
      </div>

      <van-address-list
        v-model="chosenAddressList.id"
        :list="chosenAddressList"
        :disabled-list="disabledList"
        disabled-text="以下地址超出配送范围"
        @add="onAdd"
        @edit="onEdit"
      />
    </van-popup>
    <city
      :showCity="showCity"
      @change-city="changeCity"
    ></city>
  </div>
</template>
<script>
import { async } from "q";
import City from "../city";
export default {
  data: () => ({
    value: "",
    showCity: false,
    chosenAddressList: [],
    disabledList: [
      {
        id: "3",
        name: "王五",
        tel: "1320000000",
        address: "浙江省杭州市滨江区江南大道 15 号"
      }
    ],
    localData: []
  }),
  props: ["reciving"],
  created() {
    this.getAddressList();
    this.getLocalData();
  },
  methods: {
    onClickLeft() {
      this.$emit("change-reciving", !this.reciving);
    },
    onClickRight() {
      this.$router.push("/home/address");
      console.log("新增");
    },
    onAdd() {
      // Toast("新增地址");
    },
    onEdit(item, index) {
      // Toast("编辑地址:" + index);
    },
    getAddressList() {
      var addressArr = JSON.parse(
        localStorage.getItem("address_data_list") || "[]"
      );
      addressArr.forEach(item => {
        var id = item.id;
        var name = item.name;
        var tel = item.tel;
        var address =
          item.province + item.city + item.county + item.addressDetail;
        var addressObj = {
          id,
          name,
          tel,
          address
        };
        this.chosenAddressList.push(addressObj);
      });
    },
    changeCity(data) {
      this.showCity = data;
    },
    goCity() {
      console.log(111);
      this.showCity = true;
    },
    getLocalData() {
      this.localData = JSON.parse(localStorage.getItem("address_data_list"));
      this.localData.forEach((item, index) => {
        // console.log(item,index)
        // let data = {};
        // data.name = this.localData.name;
        // data.id = index + 1;
        // data.address = item;
        // data.tel = this.localData.id;
        // console.log(data);
        // this.list[index] = data;
      });
    }
  },
  components: {
    City
  }
};
</script>
<style lang="less" scoped>
.reciving {
  .search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /deep/.van-search {
      width: 300px;
    }
    span {
      font-size: 14px;
      padding: 0;
      margin: 0;
      display: inline-block;
      width: 75px;
      text-align: center;
    }
  }
  /deep/.van-nav-bar {
    background-color: #0085ff !important;
    .van-nav-bar__text {
      color: #fff;
    }
    .van-nav-bar__title {
      color: #fff;
    }
    /deep/.van-icon {
      color: #fff;
    }
  }
  /deep/.van-address-list {
    padding: 12px !important;
    // height: 667px !important;
    /deep/.van-icon {
      display: block;
      // border-color: #1989fa !important;
      // background-color: #0085ff
    }
    /deep/.van-cell {
      border: 1px solid #f4f4f4;
      border-top: none;
      border-left: none;
      border-right: none;
    }
    /deep/.van-radio__icon {
      border-color: red;
    }
  }
}
</style>